<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好好吃商城</title>
<link type="text/css" href="css/css.css" rel="stylesheet" />
 <script type="text/javascript" src="js/vue.js"></script>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/js.js"></script>
</head>

<body style=" background:#FFF;">
<div id="app">
 <div class="loginLogo">
  <div class="logoMid">
   <h1 class="logo" style="height:71px;padding-top:10px;"><img src="img/logo.png" width="241" height="71" /></a></h1>
   <div class="loginReg">
    还没有会员账号?&nbsp;<a href="login.html">登录</a>
   </div><!--loginReg/-->
  </div><!--logoMid/-->
 </div><!--loginLogo/-->
 <h1></h1>
 <div class="loginBox">
  <img src="img/chengnuo.jpg" width="295" height="393" class="chengnuo" />
  <form  class="login_form"  >

   <div class="regList" >
    <label><span class="red">*</span> 账号</label>
    <input type="text" id="test1" v-model="xh" placeholder="请输入手机号码"/>
    <span style="color:#999;" id="23" hidden="true" >&nbsp;手机号格式不正确</span>

   </div><!--regList/-->

   <div class="regList">
    <label><span class="red">*</span> 昵称</label>
    <input type="text" id="test2"  v-model="name" placeholder="请输入昵称"/>

   </div><!--regList/-->

   <div class="regList">
    <label><span class="red">*</span> 年龄</label>
    <input type="text" id="test3" v-model="age"placeholder="请输入年龄"/>
    <span style="color:#999;"  hidden="true">&nbsp;请输入数字</span>
   </div><!--regList/-->

   <div class="regList">
    <label><span class="red">*</span> 性别</label>
    <input type="text"  id="test4" v-model="sex"placeholder="请输入性别"/>
    <span style="color:#999;" hidden="true" >&nbsp;请输入男/女</span>
   </div><!--regList/-->

   <div class="regList">
    <label><span class="red">*</span> 地址</label>
    <input type="text" id="test5" v-model="address"placeholder="请输入地址"/>

   </div><!--regList/-->

   <div class="regList">
    <label><span class="red">*</span> 请设置密码</label>
    <input type="password"id="test6" class="Pass" v-model="password"placeholder="请输入密码"/>

   </div><!--regList/-->

   <div class="regList">
    <label><span class="red">*</span> 请确认密码</label>
    <input type="password"id="test7" class="Passtwo" v-model="password2"placeholder="请再次输入密码"/>
    <span style="color:#999;"  hidden="true">&nbsp;两次密码不一致</span>
   </div><!--regList/-->


   <div class="reg">

    <input type="image" id="reg" src="img/reg.jpg" width=";284" height="34" />
   </div><!--reg/-->
  </form>
  <div class="clears"></div>
 </div><!--loginBox/-->

</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/config.js"></script>
 <script type="module" >
  var app = new Vue({
   el:"#app",
   data: {
    "xh":"",
    "password":"",
    "name":"",
    "age":"",
    "sex":"",
    "address":"",
    "password2":""
   }
  })
$("#test1").blur(function (){
 var reUser =/^1[34578]\d{9}$/;
 if (reUser.test(app.xh)==true){
  $("#test1").next().hide()
 }else {
   $("#test1").next().show()
 }
})

$("#test3").blur(function (){
 var reUsr =/^\d+$/;
 if (reUsr.test(app.age)==true){
  $("#test3").next().hide()
 }else {
  $("#test3").next().show()
 }
})
  $("#test7").blur(function (){
   if (app.password!=app.password2) {
    $("#test7").next().show();
   }
  })

$("#test4").blur(function (){
 if (app.sex=="男"|| app.sex=="女"){

  $("#test4").next().hide()
 }else {
  $("#test4").next().show()
 }
})

/*  $("#checkbox").blur(function (){
   if ($("#checkbox").is(":checked")== true) {
    $("#cl").show()
   } else {
    $("#cl").show()
   }
  })*/




$("#reg").click(function(){
 if ($("#checkbox").is(":checked")== true) {
  var data={
   "xh":app.xh,
   "password":app.password,
   "name":app.name,
   "age":app.age,
   "sex":app.sex,
   "address":app.address
  }//参数形式
  $.ajax({
   url:config.USER_ADD,
   type:"post",
   dataType:"json",
   contentType : 'application/json',
   data:JSON.stringify(data),
   success:function (data) {




    if (app.xh==''){

     $(window).attr('location', 'reg.html');
    }else if (app.name==''){

     $(window).attr('location', 'reg.html');
    }else if (app.age==""){

     $(window).attr('location', 'reg.html');
    }else if (app.sex==""){

     $(window).attr('location', 'reg.html');
    }else if (app.address==""){

     $(window).attr('location', 'reg.html');
    }else {

     $(window).attr('location', 'login.html');

    }


   }
  })
 } else {
  $("#cl").show()
  return false
 }


 })
 </script>

</body>
</html>
